<template>
<!-- 商品详情 -->
  <div class="product-detail-xq">
    <div class="fill"></div>
    <ul>
      <li>概述</li>
      <li>参数</li>
      <li>安装服务</li>
      <li>常见问题</li>
    </ul>
    <!-- list.detail中是一段html结构的数据 使用v-html直接渲染到页面上 -->
    <div class="imgs">
      <p>
        <img :src="item" alt="" v-for="(item,index) in list" :key="index">
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props:['list']
};
</script>

<style lang="scss" scoped>
  .product-detail-xq {
    width: 100%;
  }
  .fill {
    width: 750px;
    height: 20px;
    background-color: #eee;
  }
  ul{
    margin: 20px 0;
    height: 60px;
    display: flex;
    text-align: center;
  }
  li{
    font-size: 30px;
    flex: 25%;
    border-right: 1px solid #999;
    padding: 10px 0;
  }
  li:last-child{
    border: none;
  }
  .imgs p img{
    width: 750px;
  }
</style>